<template>
  <div>
    <p>多物体性能测试</p>
    <div class="three_box"></div>
  </div>
</template>

<script setup>
import { nextTick } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import Stats from "three/addons/libs/stats.module.js";
nextTick(() => {
  //第一步： 场景
  const scene = new THREE.Scene();
  // 物体
  for (let index = 0; index < 100; index++) {
    // 矩形
    let width = Math.floor(Math.random() * (10 - 0 + 1)) + 0;
    let length = Math.floor(Math.random() * (10 - 0 + 1)) + 0;
    let height = Math.floor(Math.random() * (50 - 0 + 1)) + 0;
    // let geometry = new THREE.BoxGeometry(length, width, height);
    let geometry = new THREE.SphereGeometry(5, 35, 25);
    // 材质
    let material = new THREE.MeshPhongMaterial({
      color: 0x00ffff,
      shininess: 10, //高光亮度属性
      specular: 0xefefef, //高光部分的颜色
    });
    // 物体对象
    let mesh = new THREE.Mesh(geometry, material);
    // 坐标 0-200的随机整数
    let x = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
    let y = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
    let z = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
    mesh.position.set(x, y, z);
    // 将物体加入场景
    scene.add(mesh);
  }
  // 创建一个坐标轴
  const xyz = new THREE.AxesHelper(500);
  //   将坐标轴对象添加到三维场景中
  scene.add(xyz);
  //   第二步：照相机
  let DOM = document.querySelector(".three_box");
  let offsetWidth = DOM.offsetWidth;
  let offsetHeight = DOM.offsetHeight;

  const camera = new THREE.PerspectiveCamera(
    30,
    offsetWidth / offsetHeight,
    0.1,
    3000
  );
  camera.position.set(300, 300, 300);
  camera.lookAt(50, 50, 50);
  //   第三步：光源
  //   点光源
  let pointlight = new THREE.PointLight(0xffffff, 1);
  //   光照强度
  pointlight.intensity = 20;
  pointlight.position.set(-100, 80, -100);
  let pointlightP = new THREE.PointLightHelper(pointlight, 12);
  scene.add(pointlight);
  scene.add(pointlightP);
  //   环境光
  let amlight = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(amlight);
  //  平行光
  let dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
  dirLight.position.set(-100, 100, -100);
  let dirlightP = new THREE.DirectionalLightHelper(dirLight, 10, 0xffffff);
  scene.add(dirLight);
  scene.add(dirlightP);
  //   第四步：渲染器
  let renderer = new THREE.WebGLRenderer();
  //   画布宽高
  renderer.setSize(offsetWidth, offsetHeight);
  //   执行渲染
  renderer.render(scene, camera);
  //   加入结构DOM中
  DOM.appendChild(renderer.domElement);

  //   第五步：相机控件
  let Controls = new OrbitControls(camera, renderer.domElement);
  Controls.addEventListener("change", function () {
    // console.log("相机的位置：", camera.position);
    renderer.render(scene, camera);
  });
  //   第六步：添加帧率计算
  let stats = new Stats();
  stats.domElement.style.position = "absolute";
  DOM.appendChild(stats.domElement);
  stats.setMode(1)
//   //   第七步：添加动画
//   function rotate() {
    // stats.update();
    
//     renderer.render(scene, camera);
//     requestAnimationFrame(rotate);
//   }
//   rotate();
});
</script>


<style  scoped>
.three_box {
  width: 80vw;
  height: 70vh;
  border: 1px saddlebrown solid;
  position: relative;
}
</style>